<!DOCTYPE html>
{% extends '../base.html' %}
{% block title %}主页{% endblock %}
{% block content %}
{% if request.session.is_login %}
<html lang="en">
<link>
    <meta charset="UTF-8">
    <title></title>
    <link rel = "stylesheet" href="../static/css/style.css">
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=jDIWum5BVw19QwZwSAdHWoL44lHF8QFM"></script>
	<style>
		.smart-green {
			margin-left: auto;
			margin-right: auto;
			max-width: 500px;
			background: #F8F8F8;
			padding: 30px 30px 20px 30px;
			font: 12px Arial, Helvetica, sans-serif;
			color: #666;
			border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
		}

		.smart-green h1 {
			font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
			padding: 20px 0px 20px 40px;
			display: block;
			margin: -30px -30px 10px -30px;
			color: #FFF;
			background: #9DC45F;
			text-shadow: 1px 1px 1px #949494;
			border-radius: 5px 5px 0px 0px;
			-webkit-border-radius: 5px 5px 0px 0px;
			-moz-border-radius: 5px 5px 0px 0px;
			border-bottom: 1px solid #89AF4C;
		}
        .smart-green ul li {
            float: left;  //横向排列
            text-align:center
            background-color: #80A24A;
         }

		.smart-green h1 > span {
			display: block;
			font-size: 11px;
			color: #FFF;
		}

		.smart-green label {
			display: block;
			margin: 0px 0px 5px;
		}

		.smart-green #location {
			float: left;
			margin-top: 10px;
			color: #5E5E5E;
		}
		.smart-green label > p {
			float: left;
			margin-top: 10px;
			color: #5E5E5E;
		}

		.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
			color: #555;
			height: 30px;
			line-height: 15px;
			width: 100%;
			padding: 0px 0px 0px 10px;
			margin-top: 2px;
			border: 1px solid #E5E5E5;
			background: #FBFBFB;
			outline: 0;
			-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
			box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
			font: normal 14px/14px Arial, Helvetica, sans-serif;
		}

		.smart-green textarea {
			height: 100px;
			padding-top: 10px;
		}


		.smart-green .button {
			background-color: #9DC45F;
			border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-border-radius: 5px;
			border: none;
			padding: 10px 25px 10px 25px;
			color: #FFF;
			text-shadow: 1px 1px 1px #949494;
		}

		.smart-green .button:hover {
			background-color: #80A24A;
		}

		.error-msg{
			color: red;
			margin-top: 10px;
		}
		.success-msg{
			color: #80A24A;
			margin-top: 10px;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
<form action="/collect/" method="post" class="smart-green">
    {% csrf_token %}
    <h1>药用植物收集信息
        <span>请填写以下信息.</span>
    </h1>
    <label>
        <span>药植物名称 :</span>
        <input id="name" type="text"  name="name" class="error" placeholder="请输入名称"/>
        <div class="error-msg"></div>
    </label>

    <label>
        <select id="type" type="text"  name="type" class="error" placeholder="请输入分类">
          <option value="藏药">藏药</option>
          <option value="彝药">彝药</option>
          <option value="羌药">羌药</option>
        </select>
        <div class="error-msg"></div>
    </label>

    <label>
    <span>图片上传 :</span>
      <div class="layui-input-block">
         <input type="hidden" id="img_url">
         <input type="file" onchange="showImg()" id="img_file"><img src="" alt="" id="img_id" style="width: 100px">
  		</div>
    </label>

    <label>
        <span>产量 :</span>
        <input id="value" type="number"  name="value" placeholder="请输入产量"/>
        <div class="error-msg"></div>
    </label>

<!--    <label>-->
<!--        <span>原产地 :</span>-->
<!--        <input id="address" type="text" value="" name="address" placeholder="请输入原产地"/>-->
<!--        <div class="error-msg"></div>-->
<!--    </label>-->

    <label>
        <div id="location">
<!--        <p>省份：<span id="province"></span> 城市：<span id="city"></span></p>-->
        省份:<input id="province" type="text"  name="province" placeholder=""/>
        城市:<input id="city" type="text"  name="city" placeholder=""/>
        </div>
       <div class="main-div">
        <form method="post" action="" name="theForm" enctype="multipart/form-data" onsubmit="return validate()">
        <table cellspacing="1" cellpadding="3" width="100%">
            <tr>
                <td class="label"></td>
                <td>经度<input type="text" name="lng" id="lng" value=""/>
                </td>
            </tr>
            <tr>
                <td class="label"></td>

                <td>纬度<input type="text" name="lat" id="lat" value=""/>
                </td>
            </tr>
            <tr>
                <td class="label"></td>
                <td>详细地址
                    <input type='text' value='' name='sever_add' id='sever_add' readonly>
                    <input type='button' value='点击显示地图获取地址经纬度' id='open'>
                </td>
            </tr>
        </table>
        </form>
       </div>
        <label>
        <span>介绍 :</span>
        <textarea id="message" name="message"  placeholder="请输入药植物介绍"></textarea>
        <div class="error-msg"></div>
        </label>

        <div class="error-msg"></div>
            <div class="success-msg"></div>
    <label>
        <span>&nbsp;</span>
        <input  type="submit" class="button" value="提交" onclick="confirm('感谢你的支持')"/>
        <a href="http://127.0.0.1:8000/index" class="button" role="button">返回首页</a>
    </label>
    </label>
</form>
<div id='allmap' style='width: 50%; height: 100%; position: absolute; display: none'></div>
    {% else %}
    <h1>你尚未登录，只能访问公开内容！</h1>
    {% endif %}
{% endblock %}
</body>
</html>
